<template>
  <div class="course-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-book"></i> 课程管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <!-- 统计卡片区域 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-reading"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">课程总数</div>
              <div class="stat-value">{{ tableData.length }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon green">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">授课教师</div>
              <div class="stat-value">{{ teachers.length }}人</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon blue">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">平均学分</div>
              <div class="stat-value">{{ getAverageCredit() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon purple">
              <i class="el-icon-data-analysis"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">选课情况</div>
              <div class="stat-value">{{ getSelectedInfo() }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 搜索和操作区域 -->
      <div class="action-card">
        <el-row :gutter="24" type="flex" justify="space-between" align="middle">
          <el-col :span="4">
            <el-button @click="create" type="primary" icon="el-icon-plus" size="medium" class="create-btn">创建课程</el-button>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="15">
              <el-col :span="8">
                <el-input
                  v-model="queryForm.name"
                  placeholder="请输入课程名称"
                  prefix-icon="el-icon-reading"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="queryForm.teacherName"
                  placeholder="请输入教师姓名"
                  prefix-icon="el-icon-user"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
              <el-col :span="8">
                <el-input
                  v-model="queryForm.departmentName"
                  placeholder="请输入系名称"
                  prefix-icon="el-icon-office-building"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-button @click="query" type="primary" icon="el-icon-search" class="search-btn">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 课程时间轴列表 -->
      <div class="course-timeline">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in tableData"
            :key="index"
            :type="getTimelineItemType(item)"
            :color="getTimelineItemColor(item)"
            :timestamp="item.time"
            placement="top"
          >
            <div class="course-item">
              <div class="course-header">
                <div class="course-title">
                  <span class="name">{{ item.name }}</span>
                  <el-tag size="small" effect="dark" :type="getCreditTagType(item.credit)">{{ item.credit }}学分</el-tag>
                </div>
                <div class="course-status">
                  <el-tag 
                    size="small" 
                    :type="getStatusType(item)"
                  >{{ getStatusText(item) }}</el-tag>
                </div>
              </div>
              
              <div class="course-info">
                <div class="info-row">
                  <span class="label"><i class="el-icon-user"></i> 授课教师：</span>
                  <span class="value">{{ item.teacherName }}</span>
                </div>
                <div class="info-row">
                  <span class="label"><i class="el-icon-office-building"></i> 所属系：</span>
                  <span class="value">{{ item.departmentName }}</span>
                </div>
                <div class="info-row">
                  <span class="label"><i class="el-icon-date"></i> 年级：</span>
                  <span class="value">{{ item.grade }}</span>
                </div>
                <!-- <div class="info-row">
                  <span class="label"><i class="el-icon-location"></i> 上课地点：</span>
                  <span class="value">
                    <el-tag 
                      size="small" 
                      :type="item.location ? 'success' : 'info'"
                      effect="plain"
                    >
                      {{ item.location ? item.location : '未设置' }}
                    </el-tag>
                  </span>
                </div> -->
                <div class="info-row">
                  <span class="label"><i class="el-icon-user-solid"></i> 选课情况：</span>
                  <span class="value">
                    <el-progress 
                      :percentage="getSelectedPercentage(item)" 
                      :status="getProgressStatus(item)"
                      :format="percentageFormat"
                    ></el-progress>
                  </span>
                </div>
              </div>

              <div class="course-footer">
                <div class="exam-info" v-if="item.examDate">
                  <i class="el-icon-timer"></i>
                  考试时间：{{ item.examDate }}
                  <span v-if="item.examLocation">
                    <i class="el-icon-location-outline"></i>
                    考试地点：{{ item.examLocation }}
                  </span>
                </div>
                <div class="action-buttons">
                  <el-button
                    @click="edit(item.id)"
                    type="primary"
                    icon="el-icon-edit"
                    size="small"
                  >编辑</el-button>
                  <el-button
                    @click="deleteItem(item.id)"
                    type="danger"
                    icon="el-icon-delete"
                    size="small"
                  >删除</el-button>
                </div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>

        <div class="pagination-container">
          <el-pagination
            @current-change="getPage"
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            :total="pageSize * pageCount"
            background
            layout="total, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 编辑对话框 -->
      <el-dialog
        :visible.sync="editing"
        :title="entityForm.id === -1 ? '新增课程' : '编辑课程'"
        width="600px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="custom-dialog"
      >
        <el-form
          :model="entityForm"
          ref="form"
          label-width="100px"
          class="custom-form"
        >
          <el-form-item label="课程名称" prop="name">
            <el-input
              v-model="entityForm.name"
              placeholder="请输入课程名称"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="授课教师" prop="teacherId">
            <el-select
              v-model="entityForm.teacherId"
              placeholder="请选择教师"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in teachers"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="年级" prop="grade">
                <el-input type="number" v-model="entityForm.grade"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学分" prop="credit">
                <el-input type="number" v-model="entityForm.credit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="上课时间" required>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-select v-model="courseDay" placeholder="星期">
                  <el-option
                    v-for="(item, index) in days"
                    :key="index"
                    :label="item"
                    :value="index"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select v-model="courseTime" placeholder="节次">
                  <el-option
                    v-for="(item, index) in times"
                    :key="index"
                    :label="item"
                    :value="index"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-input
                  type="number"
                  v-model="courseLength"
                  placeholder="课时数"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="上课地点" prop="location">
            <el-input v-model="entityForm.location"></el-input>
          </el-form-item>
          <el-form-item label="最大容量" prop="maxSize">
            <el-input type="number" v-model="entityForm.maxSize"></el-input>
          </el-form-item>
          <el-form-item label="考试时间" prop="examDate">
            <el-date-picker
              v-model="entityForm.examDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="考试地点" prop="examLocation">
            <el-input v-model="entityForm.examLocation"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editing = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/admin/course";
import * as teacherApi from "../../api/admin/teacher";

export default {
  name: "AdminCourse",
  data() {
    return {
      queryForm: {
        departmentName: "",
        teacherName: "",
        name: ""
      },
      entityForm: {},
      tableData: [],
      pageSize: api.pageSize,
      pageCount: 1,
      pageIndex: 1,
      editing: false,
      teachers: [],
      courseDay: "",
      courseTime: "",
      courseLength: 0,
      days: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      ],
      times: [
        "第一节",
        "第二节",
        "第三节",
        "第四节",
        "第五节",
        "第六节",
        "第七节",
        "第八节",
        "第九节"
      ]
    };
  },
  methods: {
    query() {
      api
        .getPageCount(
          this.queryForm.departmentName,
          this.queryForm.teacherName,
          this.queryForm.name
        )
        .then(res => {
          this.pageCount = res;
          this.pageIndex = 1;
          this.getPage(1);
        });
    },
    getPage(pageIndex) {
      api
        .getPage(
          pageIndex,
          this.queryForm.departmentName,
          this.queryForm.teacherName,
          this.queryForm.name
        )
        .then(res => {
          this.tableData = res;
        });
    },
    create() {
      this.entityForm = {
        id: -1,
        teacherId: null,
        name: "",
        grade: 2019,
        time: "",
        location: "",
        credit: 2,
        maxSize: 50,
        examDate: null,
        examLocation: null
      };
      this.courseDay = 1;
      this.courseTime = 1;
      this.courseLength = 2;
      this.editing = true;
    },
    edit(id) {
      api.get(id).then(res => {
        let split = res.time.split("-");
        this.courseDay = parseInt(split[0]) - 1;
        this.courseTime = parseInt(split[1]) - 1;
        this.courseLength = parseInt(split[2]);
        this.entityForm = res;
        this.editing = true;
      });
    },
    save() {
      let day = this.courseDay + 1;
      let time = this.courseTime + 1;
      this.entityForm.time = day + "-" + time + "-" + this.courseLength;

      if (this.entityForm.id === -1) {
        api.create(this.entityForm).then(() => {
          this.finishSave();
        });
      } else {
        api.update(this.entityForm).then(() => {
          this.finishSave();
        });
      }
    },
    finishSave() {
      this.$message.success("成功");
      this.getPage(this.pageIndex);
      this.editing = false;
    },
    deleteItem(id) {
      api.deleteItem(id).then(() => {
        this.$message.success("删除成功");
        this.getPage(this.pageIndex);
      });
    },
    getTeachers() {
      teacherApi.listName().then(res => {
        this.teachers = res;
      });
    },
    getTimelineItemType(item) {
      if (item.selectedCount >= item.maxSize) return 'danger';
      if (item.selectedCount >= item.maxSize * 0.8) return 'warning';
      return 'primary';
    },
    getTimelineItemColor(item) {
      if (item.selectedCount >= item.maxSize) return '#F56C6C';
      if (item.selectedCount >= item.maxSize * 0.8) return '#E6A23C';
      return '#409EFF';
    },
    getCreditTagType(credit) {
      if (credit >= 4) return 'danger';
      if (credit >= 2) return 'warning';
      return 'info';
    },
    getStatusType(item) {
      if (item.selectedCount >= item.maxSize) return 'danger';
      if (item.selectedCount >= item.maxSize * 0.8) return 'warning';
      return 'success';
    },
    getStatusText(item) {
      if (item.selectedCount >= item.maxSize) return '已满';
      if (item.selectedCount >= item.maxSize * 0.8) return '即将满员';
      return '可选';
    },
    getSelectedPercentage(item) {
      return Math.round((item.selectedCount / item.maxSize) * 100);
    },
    getProgressStatus(item) {
      if (item.selectedCount >= item.maxSize) return 'exception';
      if (item.selectedCount >= item.maxSize * 0.8) return 'warning';
      return 'success';
    },
    percentageFormat(percentage) {
      return `${percentage}%`;
    },
    getAverageCredit() {
      if (this.tableData.length === 0) return '0';
      const total = this.tableData.reduce((sum, item) => sum + (item.credit || 0), 0);
      return (total / this.tableData.length).toFixed(1);
    },
    getSelectedInfo() {
      if (this.tableData.length === 0) return '暂无数据';
      const total = this.tableData.reduce((sum, item) => sum + (item.selectedCount || 0), 0);
      return `${total}人次`;
    }
  },
  created() {
    this.query();
    this.getTeachers();
  }
};
</script>

<style scoped>
.course-wrap {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 100px);
}

.crumbs {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;

  i {
    font-size: 24px;
    color: #fff;
  }

  &.green {
    background: #67C23A;
  }

  &.blue {
    background: #409EFF;
  }

  &.purple {
    background: #6B48FF;
  }
}

.stat-info {
  flex: 1;

  .stat-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
}

/* 操作区域卡片 */
.action-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 搜索框样式 */
.search-input {
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.search-btn {
  padding: 12px 20px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 创建按钮样式 */
.create-btn {
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 课程时间轴样式 */
.course-timeline {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .el-timeline {
    padding: 20px;
  }
}

.course-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 10px;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

  .course-title {
    display: flex;
    align-items: center;
    gap: 10px;

    .name {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }
}

.course-info {
  margin: 15px 0;

  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #606266;

    .label {
      width: 120px;
      color: #909399;

      i {
        margin-right: 5px;
      }
    }

    .value {
      flex: 1;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;

  .exam-info {
    color: #909399;
    font-size: 14px;

    i {
      margin-right: 5px;
      margin-left: 15px;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .action-buttons {
    .el-button {
      margin-left: 8px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

/* 分页器样式 */
.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  text-align: right;
}

/* 弹窗样式 */
.custom-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
  }
  
  ::v-deep .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    margin: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  ::v-deep .el-dialog__body {
    padding: 24px;
  }
  
  ::v-deep .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    background: #f8f9fa;
  }
}

.custom-form {
  ::v-deep .el-form-item__label {
    font-weight: 500;
    color: #606266;
  }
  
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}
</style>
